<template>
  <view class="commentsComBox">
    <image
      :src="props.avatar"
      mode="aspectFill"
      class="avatar"
    />

    <view class="info">
      <view class="username">{{ props.username }}</view>
      <view class="content">{{ props.content }}</view>
      <text class="time">  {{ t_formats(props.time) }} </text>
    </view>
  </view>
</template>

<!-- 评论组件 -->
<script lang="ts" setup>
import { t_formats } from '@/util/t_format';
import {
  ref,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onActivated,
  onDeactivated,
  onBeforeUnmount
} from 'vue'


const props = defineProps({
    username:{
      type: String
    },
    content:{
      type: String
    },
    time:{
      type: Date
    },
    avatar:{
      type: String
    }
})

// 组件周期函数--监听组件挂载完毕
onMounted(() => {})
// 组件周期函数--监听组件数据更新之前
onBeforeUpdate(() => {})
// 组件周期函数--监听组件数据更新之后
onUpdated(() => {})
// 组件周期函数--监听组件激活(显示)
onActivated(() => {})
// 组件周期函数--监听组件停用(隐藏)
onDeactivated(() => {})
// 组件周期函数--监听组件销毁之前
onBeforeUnmount(() => {})
</script>

<style scoped lang="scss">
.commentsComBox {
  display: flex;
  padding: 15rpx 0;
  justify-content: space-between;


  .avatar {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    border: 2rpx solid red;
    margin-right: 15rpx;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  }

  .info {
    width: calc(100% - 75rpx);
    letter-spacing: 2rpx;
    font-size: 28rpx;

    .username {
      width: 50%;
      min-width: 220rpx;
      overflow: hidden; /* 隐藏超出容器的文本 */
      white-space: nowrap; /* 禁止文本换行 */
      text-overflow: ellipsis; /* 文本溢出时显示省略号 */
      word-break: keep-all;
    }
    .content {
      margin: 5rpx 0 2rpx 0;
    }

    .time {
      font-size: 26rpx;
      color: rgba(196, 191, 191, 0.875);
    }
  }
}
</style>
